<template>
  <h2>用户管理</h2>

  <br/>
  <template v-if="isAdmin">
    <div>
      <el-button type="primary" @click="addFormVisible = true">
        新增用户
      </el-button>
    </div>
    <el-table
        :data="userList"
        height="250"
        stripe
        style="width: 100%">
      <el-table-column
          prop="name"
          label="用户名"
      >
      </el-table-column>
      <el-table-column
          prop="email"
          label="邮箱">
      </el-table-column>
      <el-table-column
          prop="group"
          label="权限等级"
      >
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作">
        <template #default="scope">
          <el-button type="text" size="small" @click="handlePerm(scope.$index)">修改权限</el-button>
          <el-button type="text" size="small" @click="resetPassword(scope.$index)">重置密码</el-button>
        </template>
      </el-table-column>
    </el-table>
  </template>


  <template v-else>
    <el-empty description="你没有权限管理其他用户"/>
  </template>

  <el-dialog v-model="editFormVisible" title="重置密码">
    <el-form :model="passwordForm">
      <el-form-item label="用户名">
        <el-input v-model="passwordForm.name" autocomplete="off" disabled/>
      </el-form-item>
      <el-form-item label="新密码">
        <el-input v-model="passwordForm.password" type="password" autocomplete="off"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="editFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submitResetPwd">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>

  <el-dialog v-model="addFormVisible" title="新增用户">
    <el-form :model="addForm">
      <el-form-item label="用户">
        <el-input v-model="addForm.name" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="addForm.password" type="password" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="addForm.email" autocomplete="off"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="addFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submitAddUser">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>


</template>

<script>
import {postBackend} from "@/main";
import {ElNotification} from "element-plus";

export default {
  name: 'UserList',
  props: {
    userList: Array,
    isAdmin: Boolean
  },
  data() {
    return {
      formLabelWidth: "140px",
      editFormVisible: false,
      addFormVisible: false,
      passwordForm: {
        password: "",
        name: "",
      },
      addForm: {
        password: "",
        name: "",
        email: "",
      }
    }
  },
  methods: {
    handlePerm(index) {
      const user = this.userList[index]
      postBackend('/api/user/updateOther', {user: user.name}, res => {
        console.log(res.data)
        if (res.data.code === 0) {
          ElNotification({
            title: '成功',
            message: '更新成功'
          })
          this.$emit("refresh")
        } else {
          ElNotification({
            title: '失败',
            message: '更新失败，原因: ' + res.data.msg,
            type: 'warning'
          })
        }
      }, err => {
        ElNotification({
          title: '失败',
          message: '更新失败，原因: ' + err,
          type: 'warning'
        })
        console.log(err);
      })
    },
    resetPassword(index) {
      const user = this.userList[index]
      this.editFormVisible = true
      this.passwordForm.name = user.name
    },
    submitAddUser() {
      this.addFormVisible = false;
      postBackend('/api/user/add', this.addForm, res => {
        console.log(res.data)
        if (res.data.code === 0) {
          ElNotification({
            title: '成功',
            message: '更新成功'
          })
          this.$emit("refresh")
        } else {
          ElNotification({
            title: '失败',
            message: '更新失败，原因: ' + res.data.msg,
            type: 'warning'
          })

        }
      }, err => {
        ElNotification({
          title: '失败',
          message: '更新失败，原因: ' + err,
          type: 'warning'
        })
        console.log(err);
      })
    },
    submitResetPwd() {
      this.editFormVisible = false;
      postBackend('/api/user/changePassword', this.passwordForm, res => {
        console.log(res.data)
        if (res.data.code === 0) {
          ElNotification({
            title: '成功',
            message: '更新成功'
          })
        } else {
          ElNotification({
            title: '失败',
            message: '更新失败，原因: ' + res.data.msg,
            type: 'warning'
          })
        }
      }, err => {
        ElNotification({
          title: '失败',
          message: '更新失败，原因: ' + err,
          type: 'warning'
        })
        console.log(err);
      })
    }
  }
}
</script>

<style>

</style>
